<template>
  <div>
    <el-row>
      <el-col :span="20">
        <el-button @click="handleReset">重置表单配置</el-button>
        <el-button @click="handleGetNodeData">获取某个节点数据配置</el-button>
      </el-col>
      <el-col :span="24" style="border-bottom: 1px solid #ccc;padding-bottom: 10px;margin-bottom: 20px;">
          <div contenteditable @input="handleInput">
            <pre style="font-size: 16px">{{ model }}</pre>
          </div>
      </el-col>
      <el-col :span="4">
        <div contenteditable @input="handleInputJson">
            <pre style="font-size: 16px">{{ json }}</pre>
          </div>
      </el-col>
      <el-col :span="18">
        <FormRender ref="formRenderRef" :config="config" v-model:model="model"/>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import FormRender from "../../formDesigner/formRender/FormRender.vue";
import { json } from "./demoJson.js";
const config = ref(json||{});
const model = ref({
  "input-uuid-1-name": "张三",
  "input-uuid-2-name": "李四",
  "input-uuid-3-name": "王五",
  "input-uuid-4-name": "赵六",
  "select-uuid-1-name": "male",
});
const formRenderRef = ref(null);
const handleInput = (e) => {
  model.value = JSON.parse(e.target.innerText);
}
const handleInputJson = (e) => {
  json.value = JSON.parse(e.target.innerText);
  // 重新渲染
  formRenderRef.value.reload(json.value);
}

const handleReset = () => {
  formRenderRef.value.reset();
}

const handleGetNodeData = () => {
  console.log('获取节点数据配置',formRenderRef.value.getNodeData("input-uuid-1"))
}
</script>